<template>
  <Popup v-model:show="showModal" :title="props.title" @submit="onSubmit">
    <view class="car-list">
      <view :class="`car-itm ${currentItem?.car_frame_number === itm.car_frame_number && 'active'}`"
        @click="currentItem = itm" v-for="(itm, ind) in carList" :key="ind">
        {{ itm.car_frame_number }}
      </view>
    </view>
  </Popup>
</template>
<script setup>
import { ref, watch } from "vue";
import Popup from "@/components/ui/popup"
import { useShowModal } from "@/path/hooks/v-model"
import service from "@/path/service"
const carList = ref([])
const props = defineProps({
  show: Boolean,
  title: String,
  // 当前选中项
  current: Object,
})
const emit = defineEmits(['update:show', 'update:current'])
const { showModal } = useShowModal(props, emit)
const currentItem = ref()

watch(() => props.current, v => {
  currentItem.value = { ...v }
}, { immediate: true, deep: true });

function onSubmit() {
  emit("update:current", currentItem.value);
}
service.get("api/ycg/usercenter/mycarselect").then((res) => {
  carList.value = res
  if (res && res[0]) {
    emit("update:current", res[0]);
  }
})
</script>
<style scoped lang="less">
.car-list {
  padding: 0rpx 32rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .car-itm {
    width: 100%;
    height: 80rpx;
    background: #F7F7F7;
    border-radius: 32px;
    color: #999999;
    text-align: center;
    line-height: 80rpx;
    box-sizing: border-box;
    margin: 0 24rpx 48rpx 24rpx;

    &.active {
      background-color: #9CDB14;
      color: #fff;
    }
  }
}
</style>